<template>
    <div class="home">
        <block-loading :loading="blockLoading">
            <van-row type="flex" justify="space-between" class="banner">
                <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_ping.png')"/>
                <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
            </van-row>

            <van-cell-group class="main_panel">
                <h3 class="title"><span><font>学校列表</font></span></h3>

                <table class="table">
                    <thead>
                    <tr>
                        <th>学校名称</th>
                        <th>班级数量</th>
                        <th> </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in classList">
                        <td>{{item.school_name}}</td>
                        <td>{{item.class_num }}</td>
                        <td><van-button round type="warning"  class="check_course_btn" size="mini" @click="toCheckCourse(item.school_id)" :disabled="item.class_num==0">课程</van-button></td>
                    </tr>
                    </tbody>
                </table>
            </van-cell-group>
        </block-loading>
    </div>
</template>

<script >
// @ is an alias to /src
import VueDraggable from "vuedraggable";
import { formatArrToFormData } from "@/utils";
import $store from "@/store/index";
import $router from "@/router/index";
import $api from "@/api/index";

export default {
  name: "course",
  components: {
    draggable: VueDraggable,
  },
  data() {
    return {
      className:'',
      school_class_id:'',
      classList:[],
      showPicker:false,
      btnLoading:false,
      blockLoading: true,
    };
  },
  created(){

  },
  mounted(){
    this.$store.dispatch("user/checkRole", '3').then(res=>{
      this.getTeacherSchoolList()
    })
  },
  methods: {
    // 获取班级列表
    async getTeacherSchoolList(){
      const res= await $api.school.getTeacherSchoolList()
      this.classList = res.data
      this.blockLoading = false
    },
    // 查看课程
    toCheckCourse(id){
      this.$router.push({path:'/select_course',query:{school_id:id}})
    },
  },
};
</script>
<style lang="scss" scoped>
    ::v-deep{
        .banner .banner_left{
            width: 287px;
            height: 280px;
            margin-top: -20px;
        }
        .main_panel{
            padding: 40px 10px;
            .title{
                text-align: center;
                font-size: 32px;
                font-weight: bold;
                margin: 0;
                color: #292929;
                span{
                    position: relative;
                    padding: 0 10px;
                    font{
                        z-index: 2;
                        position: relative;
                    }
                    &:after{
                        content: '';
                        position: absolute;
                        bottom:2px;
                        left: 0;
                        width: 100%;
                        height: 6px;
                        background: #FF804E;
                        border-radius: 3px;
                        z-index: 1;
                    }
                }
            }
        }
        .table{
            margin-top: 30px;
            width: 100%;
            font-size: 26px;
            color: #333;
            border-collapse: collapse;
            th,td{
                text-align: center;
                vertical-align: middle;
            }
            th{
                background-color: #FDF4F0;
                height: 66px;
            }
            td{
                height: 90px;
                line-height: 90px;
            }
            tr:nth-child(2n){
                background-color: #F7F8FD;
            }
            .edit_btn{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 46px;
                &:active{
                    background-color: #ccc;
                }
            }
        }
        .check_course_btn{
            width: 101px;
            height: 43px;
            line-height: 43px;
            font-size: 26px;
            background: #FF804E;
            vertical-align: middle;
            border-radius: 22px;
        }
    }
</style>
